<template>
  <div class="role-pack">
    <Row class="tips_label_warp">
      <Col span="24" class="tips">
        <Icon type="md-alert" class="tips_icon" />
        <div>同步说明：当修改角色包的功能权限后，需要点击同步按钮才会生效</div>
      </Col>
    </Row>
    <dt-grid ref="gridRef" :onFetch="onFetch"></dt-grid>
    <!--新增，编辑角色-->
    <edit-page ref="editRef" @search="onSearch"></edit-page>
    <check-modal ref="checkRef" />
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import dt from '@dt/dt'
  import { columnOpt } from './biz/column'
  import apiMgr from './biz/index'
  import editPage from './component/editPage.vue'
  import checkModal from './component/checkModal.vue'

  const [gridRef, editRef, checkRef] = [ref(), ref(), ref()]

  onMounted(() => {
    gridRef.value.init(new columnOpt(fun))
    gridRef.value.fetch()
  })

  function onFetch(data) {
    return apiMgr.getRoleList(data)
  }

  function onSearch() {
    gridRef.value.fetch()
  }

  const fun = {
    editFun: (row) => {
      editRef.value.show(row)
    },
    checkFun: (row) => {
      checkRef.value.show(row)
    },
    syncFun: (row) => {
      dt.ui.Modal.confirm({
        title: '提示',
        content: '是否将当前角色包最新的功能权限生效？',
        onOk: () => {
          apiMgr.saRoleTypeSync({ id: row.id }).then((res) => {
            dt.ui.Message.success('同步成功')
            onSearch()
          })
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .role-pack {
    .tips_label_warp {
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 10px;
      .tips {
        line-height: 20px;
        font-size: 14px;
        display: flex;
        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }
  }
</style>
